﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>简洁的登录注册页面演示</title>
    <style>
        *,::after,::before{box-sizing: border-box;margin: 0;padding: 0;font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";}
        .login-bg{background-color: #f7fafc;justify-content: center;display: flex;min-height: 100vh;}
        .login-box{border-radius: .5rem;box-shadow: 0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);max-width: 1280px;flex: 1 1 0%;display: flex;justify-content: center;background-color: #fff;margin: 5rem;}
        .login-left{flex: 1 1 0%;padding: 3rem;}
        .login-form{margin-top: 3rem;align-items: center;flex-direction: column;display: flex;}
        .login-label{font-size: 1.5rem;line-height: 2rem;font-weight: 800;}
        .login-info{width: 100%;margin-top: 2rem;margin-bottom: 2rem;flex: 1 1 0%;max-width: 20rem;margin-left: auto;margin-right: auto;}
        .login-username,.login-password{background-color: #f7fafc;border: 1px solid #edf2f7;width: 100%;padding-left: 2rem;padding-right: 2rem;padding-top: 1rem;padding-bottom: 1rem;font-size: .875rem;line-height: 1.25rem;font-weight: 500;border-radius: .5rem;}
        .login-username:focus,.login-password:focus{background-color: #fff;border-color: #66afe9;outline: 0;box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);transition: all .15s;}
        .login-password{margin-top: 1.25rem;}
        .login-btn{cursor: pointer;outline: none;border: none;border-radius: .5rem;background-color: #667eea;width: 100%;letter-spacing: .025em;color: #fff;padding-top: 1rem;padding-bottom: 1rem;margin-top: 1.25rem;font-weight: 600;justify-content: center;align-items: center;display: flex;transition: all .15s;}
        .login-btn:hover{background-color: #5268cf;}
        .login-btn-text{font-weight: 600;font-size: 1rem;}
        .login-right{background-color: #ebf4ff;display: flex;width: 50%;text-align: center;}
        .login-img{background-image: url('images/work.svg');width: 100%;margin: 3rem;background-size: contain;background-repeat: no-repeat;background-position: center;}
        .login-error{text-align: center;margin-top: 1.5rem;font-size: .75rem;line-height: 1rem;color: #d9534f;}
        @media only screen and (max-width: 768px) {
          .login-right {display: none;}
        }
    </style>
</head>

<body class=".login-bg">
<div class="login-box">
    <div class="login-left">
        <div class="login-form">
            <h1 class="login-label">用户登录</h1>
            <div class="login-info">
                <input class="login-username" type="email" placeholder="电子邮箱">
                <input class="login-password" type="password" placeholder="密码">
                <button class="login-btn">
                    <span class="login-btn-text">注 册</span>
                </button>
                <p class="login-error" style="">用户名密码错误</p>
            </div>
        </div>
    </div>
    <div class="login-right">
        <div class="login-img"></div>
    </div>
</div>
</body>
</html>